<template>
  <div>
    <!-- 顶部daohang -->
<!-- <van-nav-bar
  title="个人中心"
  left-arrow
  @click-left="$router.back()"
/> -->
<my-header title="个人中心" @onClickLeft="$router.push('/my')" />
<!-- 头像 -->
<van-cell class="icon-ren renren" >
    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1757702845,51708014&fm=26&gp=0.jpg" class="renrenwang" alt="">
</van-cell>
<van-cell :border='false'>
    <a class="xiahua" href="#">更换头像</a>
</van-cell>
  <!-- 表单 -->
<form class="shuru">
<div class="ddd"><span> &nbsp;&nbsp; 昵称：</span><input name="username" class="user pub" :value="userIfom.name" placeholder="用户名（可编辑）" ></div>
<div class="ddd"><span>手机号：</span><input name="mobile" class="mobile pub" :value="userIfom.mobile" placeholder="联系方式（可编辑）"></div>
<div class="ddd"><span>验证码：</span><input name="yzm" class="pub yzm"><button class="yanzheng pub" @click="yanzhengma">获取验证码</button></div>
<van-button  block type="info" native-type="submit" class="xiugai">确认修改</van-button>
</form>
  </div>
</template>

<script>
import MyHeader from './components/my-header.vue'
export default {
  name: '',
  components: {
    MyHeader
  },
  props: {},
  data () {
    return {
      userIfom: {
        name: '晓晓',
        mobile: 13118108011,
        touxiang: 'https://b.yzcdn.cn/vant/icon-demo-1126.png'
      }
    }
  },
  computed: {},
  watch: {},
  created () {

  },
  mounted () {

  },
  methods: {
    yanzhengma () {
      var yanz = document.getElementsByClassName('yanzheng')[0]
      var time = 60
      var timer = null
      yanz.innerHTML = time + 's后重试'
      yanz.setAttribute('disabled', 'disabled') // 禁用按钮
      timer = setInterval(function () {
        // 定时器到底了 兄弟们回家啦
        if (time === 1) {
          clearInterval(timer)
          yanz.innerHTML = '获取验证码'
          yanz.removeAttribute('disabled')
        } else {
          time--
          yanz.innerHTML = time + 's后重试'
        }
      }, 1000)
    }
  }
}
</script>

<style scoped lang="less">
.icon-ren{
    font-size: 100px;
}
.van-cell__value--alone{
    text-align: center;
}
.xiahua{
    // margin-top: 0;
    text-decoration: underline;
    font-size: 36px;
}
.van-cell::after{
border: none;
}
.van-cell--borderless{
    padding-top: 0;
}
.ddd{
    margin: 60px;
}
.pub{
display: inline-block;
border: none;
border-bottom: 2px solid #111;
}
.shuru{
    font-size: 36px;
}
.yzm{
    width: 200px;
}
.yanzheng{
    border: 1px solid #666;
    border-radius: 5px;
}
.yanzheng{
    padding: 10px 25px;
    border-radius: 20px;
    margin-left: 15px;
}
.xiugai{
    position: absolute;
    bottom: 0;
}
.renren {
  padding: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid black;
  overflow: hidden;
  margin: 0 auto;
  /deep/ .van-cell__value {
    width: 100%;
    height: 100%;
  }
  .renrenwang {
    width: 150px;
    height: 150px;
  }
}
// button{
//   background: #45BCF9;
//   color: #fff;
//   padding: 4px 10px;
//   border: none;
//   outline: none;
//   cursor: pointer;
// }
// button:hover{
//   background: #00a8fe;
// }
// button.disabled{
//   background: #000;
//   cursor: auto;
// }
// button.disabled:hover{
//   background: #000;
// }
</style>
